<template>
	<view class="add">
		<!-- <view class="add_item" @tap="open('shopBoxStatus')">
			<view>选择库房</view>
			<view class="add_picker">
				<image src="/static/images/right.png" class="right"></image>
			</view>
		</view> -->
		<view class="box_title">确认领取信息</view>
		<block v-for="(item,index) in list">
			<view class="add_icon" :key="index">
				<view>{{item.title}} X{{item.num}}</view>
				<view v-if="list.length > 1">
					<image src="/static/images/visit_icon4.png" @tap="deleteList(index)"></image>
				</view>
			</view>
			<view class="add_item">
				<view>库房</view>
				<picker mode="selector" :range="item.warehouseList" @change="getPickerValue" :range-key="'mark'" class="add_picker" :data-index="5" :data-indexs="index">
					<text>{{item.warehouse_name}} {{item.warehouse_stock}}</text>
					<image src="/static/images/right.png" class="right"></image>
				</picker> 
			</view>
			<view class="add_textarea">
				<textarea v-model="list[index].desc" placeholder="请输入备注" v-show="!shopBoxStatus"/>
			</view>
		</block>
		
		<!-- <view class="add_time">领取时间：2019-02-12 12:23</view> -->
		<view class="save" @tap="submit()">确认</view>
		
		<view class="window" v-if="shopBoxStatus">
			<view class="window_flex">
				<view class="shop">
					<view class="shop_title">选择门店</view>
					<scroll-view scroll-y="true" class="shop_list_box">
						<view class="shop_list">
							<view class="shop_item active">北京店铺<image src="/static/images/shop_sel.png" mode=""></image></view>
							<view class="shop_item active">北京店铺<image src="/static/images/shop_sel.png" mode=""></image></view>
							<view class="shop_item active">北京店铺<image src="/static/images/shop_sel.png" mode=""></image></view>
							<view class="shop_item active">北京店铺<image src="/static/images/shop_sel.png" mode=""></image></view>
							<view class="shop_item">北京店铺</view>
							<view class="shop_item">北京店铺</view>
							<view class="shop_item">北京店铺</view>
							<view class="shop_item">北京店铺</view>
							<view class="shop_item">北京店铺</view>
							<view class="shop_item">北京店铺</view>
						</view>
					</scroll-view>
					<view class="shop_btn">
						<view @tap="open('shopBoxStatus')">取消</view>
						<view @tap="open('shopBoxStatus')">确认</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				shopBoxStatus:false,
				houseList:[],
				list:[]
			}
		},
		onLoad() {
			let that = this;
			uni.getStorage({
				key:"accessories",
				success:res =>{
					for(let i in res.data){
						let item = {
							warehouse_id:0,
							warehouse_name:'',
							warehouse_stock:0,
							desc:"",
							product_id:res.data[i].id,
							num: res.data[i].num,
							title:res.data[i].title,
							product_type:res.data[i].product_type,
							warehouseList:[]
						}

						this.$api.getProductLibrary({product_id:res.data[i].id}).then(res => {
							for(let i in res){
								res[i].mark = res[i].title+" "+res[i].stock; 
							}
							item.warehouseList = res;
							item.warehouse_id = res[0].id;
							item.warehouse_name = res[0].title;
							item.warehouse_stock = res[0].stock;
							 
							that.list.push(item);
						})

					}
						
				}
			})
		},
		methods:{
			open(obj){//打开窗口
				this[obj] = !this[obj]
			},
			getPickerValue(e){
				this.list[e.currentTarget.dataset.indexs].warehouse_id = this.list[e.currentTarget.dataset.indexs].warehouseList[e.detail.value].id;
				this.list[e.currentTarget.dataset.indexs].warehouse_name = this.list[e.currentTarget.dataset.indexs].warehouseList[e.detail.value].title;
				this.list[e.currentTarget.dataset.indexs].warehouse_stock = this.list[e.currentTarget.dataset.indexs].warehouseList[e.detail.value].stock;

			},
			deleteList(index){
				this.list.splice(index,1)
			}, 
			submit(){
				
				let upJson = {
					user_id:uni.getStorageSync("userId"),
					lists:this.list
				}
				upJson.lists = JSON.stringify(upJson.lists)
				this.$api.drawAccessories(upJson)
			}
		}
	}
</script>

<style>
	.add{width: 100%;padding-bottom: 50upx;background: #FFFFFF;padding-top: 30upx;}
	.box_title{margin-bottom:30upx;}
	.add_time{text-align: center;margin: 50upx 0 20upx 0;font-size: 28upx;color: #9BA7B7;}
	.save{margin-top: 0;}
	.shop{width: 530upx;background: #FFFFFF;border-radius: 8upx;}
	.shop_title{font-size:36upx;color: #333333;text-align: center;line-height: 115upx;}
	.shop_list_box{width: 100%;height: 400upx;}
	.shop_list{width: 100%;height: 400upx;font-size: 28upx;color: #000000;padding: 0 30upx;box-sizing: border-box;display: flex;flex-direction: row;justify-content: space-between;flex-wrap: wrap;}
	.shop_item{position: relative;width: 210upx;height: 72upx;line-height: 72upx;background: #EEEEEE;text-align: center;margin-bottom: 30upx;overflow: hidden;}
	.shop_item image{width: 40upx;height: 36upx;position: absolute;right: 0;bottom: 0;}
	.shop_btn{width: 100%;display: flex;flex-direction: row;align-items: center;border-top: 2upx solid #EEEEEE;font-size: 34upx;color: #9BA7B7;line-height:100upx;}
	.shop_btn view{flex-grow: 1;text-align: center;}
	.shop_btn view:nth-child(2){border-left: 2upx solid #EEEEEE;color: #049BFF;}
	.active{background:#C6E6FD ;color: #049BFF;}
	
	
	.add_icon{background: #FFFFFF;color: #333333;border-bottom: 1px solid #EEEEEE;}
</style>
